﻿<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" rel="stylesheet" href="css/timeSlider.css" />
<title>scheduler</title>
<style>
    body{
        background:url();
        user-select:none;
    }
    
    .code{
       width:500px;
       border:1px solid black;
       background:#d4d4d4;
    }
</style>
</head>
<body>
<div class="eventBoxWrap">
    <label class="label-event">事件1</label>
    <div class="eventBox">
    </div>
    <label class="label-event">事件2</label>
    <div class="eventBox">
    </div>
    <label class="label-event">事件3</label>
    <div class="eventBox">
    </div>
    <label class="label-event">事件4</label>
    <div class="eventBox">
    </div>
    <label class="label-event">事件5</label>
    <div class="eventBox">
    </div>
</div>

<div onselectstart="return false;">
	<label class="label-week">星期一:</label>
	<div id="timeslider1" class="timeSlider">
	</div>
</div>

<div onselectstart="return false;">
	<label class="label-week">星期二:</label>
	<div id="timeslider2" class="timeSlider">
	</div>
</div>

<div onselectstart="return false;">
	<label class="label-week">星期三:</label>
	<div id="timeslider3" class="timeSlider">
	</div>
</div>

<div onselectstart="return false;">
	<label class="label-week">星期四:</label>
	<div id="timeslider4" class="timeSlider">
	</div>
</div>

<div onselectstart="return false;">
	<label class="label-week">星期五:</label>
	<div id="timeslider5" class="timeSlider">
	</div>
</div>

<div onselectstart="return false;">
	<label class="label-week">星期六:</label>
	<div id="timeslider6" class="timeSlider">
	</div>
</div>

<div onselectstart="return false;">
	<label class="label-week">星期日:</label>
	<div id="timeslider7" class="timeSlider">
	</div>
</div>
<br>
初始化方式：
<pre class="code">
    var defaultTime1=["2:9-5:45", "10:8-13:36", "17:34-20:32"];
    var defaultEvents1=[1,2,3];
	var timeS1=new TimeSlider({
        id:"timeslider1",
        language:"cn",
        defaultTime:defaultTime1,
        defaultEvents:defaultEvents1     
    });
</pre>
<p>
获取星期一时间轴上时间
</p>
<button id="getTime">获取</button>
<p id="content">
</p>
<p>
重新设置星期一时间轴上时间
</p>
<button id="setTime">设置</button>
<pre class="code">
timeS1.set({
       setTimeArray:["2:9-5:45", "10:8-13:36", "17:34-20:32"],        
       setEventsArray:[4,2]
   })
</pre>
<script type="text/javascript" src="lib/jquery.js"></script>
<script type="text/javascript" src="lib/underscore.js"></script>
<script type="text/javascript" src="js/timeSlider.js"></script>
<script>
    /* 动态创建7个时间轴 */
    var defaultTime1=["2:9-5:45", "10:8-13:36", "17:34-20:32"];
    var defaultEvents1=[1,2,3];
	var timeS1=new TimeSlider({
        id:"timeslider1",
        language:"cn",
        defaultTime:defaultTime1,
        defaultEvents:defaultEvents1     
    });
    var timeS2=new TimeSlider({
        id:"timeslider2",
        language:"cn"
    });
    
    var timeS3=new TimeSlider({
        id:"timeslider3",
        language:"cn"
    });
    
    var timeS4=new TimeSlider({
        id:"timeslider4",
        language:"cn"
    });
    
    var timeS5=new TimeSlider({
        id:"timeslider5",
        language:"cn"
    });
    
    var timeS6=new TimeSlider({
        id:"timeslider6",
        language:"cn"
    });
    
    var timeS7=new TimeSlider({
        id:"timeslider7",
        language:"cn"
    });
              
              
    $("#getTime").click(function(){
        $("#content").empty();
        _.forEach(timeS1.get().times,function(item,index){
            var event=timeS1.get().events[index]+1;
            var time='<span>'+item+'</span> <span>事件'+event+'</span></br>';       
           $("#content").append(time)
        })
    })        
    
    $("#setTime").click(function(){
        timeS1.set({
              setTimeArray:["2:30-14:43","15:40-18:30"]    
              
        })
    })
</script>
</body>
</html>